<template>
    <div>
      <a-modal v-model:visible="visible" class="modal" :bodyStyle="{height:350+'px'}" >
        <template #title>
            <h3>试验信息填写</h3>
        </template>
        <template #footer>
          <a-button key="submit" type="primary" @click="handleSubmitClick">确定</a-button>
        </template>
        <a-form :model="modalRef">
            <a-form-item name="date-picker" label="试验日期：">
                <a-date-picker v-model:value="modalRef.testDate" value-format="YYYY-MM-DD" />
            </a-form-item>
            <a-form-item label="试验人：" required>
                <a-input v-model:value="modalRef.tester" size="200px"/>
            </a-form-item>
            <a-form-item label="审核人：" required>
                <a-input v-model:value="modalRef.auditor" />
            </a-form-item>
            <a-form-item name="date-picker" label="投运日期：">
                <a-date-picker v-model:value="modalRef.operateDate" value-format="YYYY-MM-DD" />
            </a-form-item>
            <a-form-item label="试验结论：" required>
                <a-select ref="select" v-model:value="modalRef.conclusion" style="width: 120px">
                    <a-select-option value="合格">合格</a-select-option>
                    <a-select-option value="报废">报废</a-select-option>
                </a-select>
            </a-form-item>
        </a-form>       
      </a-modal>
    </div>
</template>
<script setup>
import { ref,reactive, onMounted } from 'vue';
import { Form } from 'ant-design-vue'
import request from '@/utils/request'

const visible = ref(false);
const value = ref('')

const props=defineProps(['selectedKeys'])
const emit=defineEmits(['loadData'])
const modalRef = reactive({
    testDate: '',
    tester: '',
    auditor: '',
    operateDate:'',
    conclusion:'',
})

const rulesRef = reactive({
    testDate: [{
        required: true,
        message: '请填写试验日期',
    }],
    tester: [{
        required: true,
        message: '请填写试验人',
    }],
    auditor: [{
        required: true,
        message: '请填写审核人',
    }],
    operateDate: [{
        required: true,
        message: '请填写投运日期',
    }],
    conclusion: [{
        required: true,
        message: '请填写试验结论',
    }],
})

const useForm = Form.useForm
const { validate, validateInfos, mergeValidateInfo } = useForm(modalRef, rulesRef)

//确定按钮
const handleSubmitClick = () => {
    validate().then(() => {
        loadData()
        emit('loadData')
        
        visible.value = false
        
    }).catch(err => {
            console.log('error', err);
        });
};
const showModal = () => {
    visible.value = true;
};

defineExpose({
  showModal,
})

const loadData = async() => {
    console.log(modalRef)
    modalRef.idList = props.selectedKeys
    let result = await request({
        url:'/toolDetail/updateMultipleToolsUsingMultipleToolDetails',
        method:'post',
        data:{
        ...modalRef
        }
    })
    console.log(result)
}
</script>
<style lang="less" scoped>
/* .modal{
    height: 600px;
} */
h3{
    font-weight: 900;
}
/deep/ .ant-input{
    width: 150px;
  }
/deep/.ant-form-item-label > label{
    width: 150px;
    justify-content: flex-end;
}
</style>
